 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="sub-header">记录</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>记录的时间</th>
                    <th>记录持续时长（秒）</th>
                    <th>采样率（Hz）</th>
                    <th>智能分析结果</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{ ecg.record_begin_time }}</td>
                    <td>{{ ecg.ecg_time }}</td>
                    <td>{{ ecg.ecg_hz }}</td>
                    <td>{{ clss.0 }}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <a href="/download_ecg/{{ ecg.person_id }}/{{ ecg.id }}" style="color: blue;font-size: 15px">下载ECG记录</a>
        <h2 class="sub-header">心率波形图</h2>
        <div class="row placeholders">
            <span style="width:300px;height:100px;" id="ecg_label"></span>
            <br/>
            <button class="btn btn-info" id="change_label" onclick="change_label()">修改标注</button>
            <nav id="context-menu" class="context-menu" style="display: none;">
                <ul class="context-menu__items">
                    <li class="context-menu__item">
                        <a href="#" class="context-menu__link" data-action="Normal"><i class="fa fa-edit"></i>Normal</a>
                    </li>
                    <li class="context-menu__item">
                        <a href="#" class="context-menu__link" data-action="AF"><i class="fa fa-edit"></i> AF</a>
                    </li>
                    <li class="context-menu__item">
                        <a href="#" class="context-menu__link" data-action="Noise"><i class="fa fa-edit"></i> Noise</a>
                    </li>
                    <li class="context-menu__item">
                        <a href="#" class="context-menu__link" data-action="Other"><i class="fa fa-edit"></i> Other</a>
                    </li>
                    <li class="context-menu__item">
                        <a href="#" class="context-menu__link" data-action="Cancel"><i class="fa fa-times"></i>取消</a>
                    </li>
                </ul>

            </nav>
            <div id="sample" style="overflow: scroll">
                <canvas id="ecg" height=500px width=3840px></canvas>
            </div>
            <button type="button" class="btn btn-success" id="prior" onclick="prior_operation()">上一页</button>
            <button type="button" class="btn btn-success" id="next" onclick="next_operation()">下一页</button>
        </div>
        <h2 class="sub-header">诊断报告</h2>
        <div>
            <textarea name="report" id="" cols="300" rows="100">{{ ecg_report }}</textarea>
        </div>
    </div>

    <script type="text/javascript">
        let data_ = [];
        let data = [];
        let sample_hz = Number({{ hz }});
        let sample_point = sample_hz * 10; //x轴长度
        let report = '{{ ecg_report }}';
        let classification = [];
        let index = 0;//记录当前读取的数据索引

        {% for cl in cls_num %}
            classification.push(Number({{ cl }}));
        {% endfor %}
        console.log(classification);

        {% for d in data_mat %}
            data_.push({{ da }});//一维数组
        {% endfor %}

        console.log(data_.length,data_);

        // 将一维数组转换成sample_point*n的二维数组
        let n = data_.length/sample_point;
        for (let i = 0; i < n; i++) {
            data[i] = [];
            for (let j = 0; j < sample_point; j++) {
                if (data_.length === 0) {
                    data[i][j] = 0;//最后补0
                } else {
                    data[i][j] = data_.shift();
                }
            }
        }
        console.log(data.length,data);

        mainCanvas();

        function mainCanvas() {
            let c_canvas = document.getElementById("ecg");
            let Length = data[index].length;
            //console.log(Length);
            drawingGrid(c_canvas); //画网格
            let colors = ['#54FF9F', '#000000', '#FF6A6A', '#CD6839', '#008B8B'];//绘制心率的颜色
            //画心率
            if (classification[index] === 0) {
                drawLine(c_canvas, colors[0], Length);
            } else if (classification[index] === 1) {
                drawLine(c_canvas, colors[1], Length);
            } else if (classification[index] === 2) {
                drawLine(c_canvas, colors[2], Length);
            } else if (classification[index] === 3) {
                drawLine(c_canvas, colors[3], Length);
            }

            let label_span = document.getElementById("ecg_label");
            addLabel(label_span, classification[index])  //显示标注
        }

        function next_operation() {
            index += 1;
            if (index < data.length) {
                clearCanvas();
                mainCanvas();
            } else {
                alert("已到最后")
            }
        }

        function prior_operation() {
            index -= 1;
            if (index >= 0) {
                clearCanvas();
                mainCanvas();
            } else {
                alert("已到开头")
            }
        }

        function clickInsideElement(event, className) {
            let el = event.srcElement || event.target;
            if (el.classList.contains(className)) {
                return el;
            } else {
                while (el = el.parentNode) {
                    if (el.classList && el.classList.contains(className)) {
                        return el;
                    }
                }
            }
            return false;
        }

        let currentAnnotation;
        document.addEventListener("click", function (event) {
            var clickeElIsLink = clickInsideElement(event, "context-menu__link");
            if (clickeElIsLink) {
                document.querySelector('.context-menu').style.display = 'none';
                event.preventDefault();
                const action = clickeElIsLink.getAttribute("data-action");
                if (action === "AF") {
                    currentAnnotation = 'AF'
                }
                if (action === "Normal") {
                    currentAnnotation = 'Normal'
                }
                if (action === "Noise") {
                    currentAnnotation = 'Noise'
                }
                if (action === "Other") {
                    currentAnnotation = 'Other'
                }
                if (action === "Cancel") {
                    document.querySelector('.context-menu').style.display = 'none';
                    let label_span = document.getElementById("ecg_label");
                    addLabel(label_span, classification[index]); //显示标注
                }
                //console.log(currentAnnotation);
                // 修改显示的标签
                document.getElementById("ecg_label").innerHTML = currentAnnotation;
                //send_Ajax(currentAnnotation);
            }
        });

        //发送ajax请求
        /*
        function send_Ajax(label) {
            $.post({
                url: "/get_label/",
                data: {label: label},
                success: function (data) {
                    console.log(data)
                }
            })
        }
        */

        function change_label() {
            var context_menu = document.getElementById("context-menu");
            context_menu.style.display = 'block';
        }

        function clearCanvas() {
            let c = document.getElementById("ecg");
            var cxt = c.getContext("2d");
            cxt.clearRect(0, 0, c.width, c.height);
        }

        // 画网格
        function drawingGrid(c_canvas) {
            drawSmallGrid(c_canvas, '#f1dedf', 2);   //最小的网格  参数：目标元素  颜色 每根线之间的距离
            drawMediumGrid(c_canvas, '#f0adaa', 10);   //中等网格
            drawBigGrid(c_canvas, '#e0514b', 50);  //大网格
        }

        //小网格
        function drawSmallGrid(c_canvas, color, distance) {
            let context = c_canvas.getContext("2d");
            context.strokeStyle = color;
            context.strokeWidth = 1;
            context.beginPath();            //新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
            for (let x = 0.5; x < sample_point; x += distance) {          //x轴
                context.moveTo(x, 30);     //路径的起始坐标
                context.lineTo(x, 500);
                context.stroke();   //线条来绘制图形轮廓
            }
            for (let y = 30; y < 500; y += distance) {
                context.moveTo(0.5, y);
                context.lineTo(sample_point, y);
                context.stroke();
            }
            context.closePath();   //闭合路径之后，图形绘制命令又重新指向到上下文中
        }

        //中网格
        function drawMediumGrid(c_canvas, color, distance) {
            let context = c_canvas.getContext("2d");
            context.strokeStyle = color;
            context.strokeWidth = 1;
            context.beginPath();
            for (let x = 0.5; x < sample_point; x += distance) {
                context.moveTo(x, 30);
                context.lineTo(x, 500);
                context.stroke();
            }
            for (let y = 30; y < 500; y += distance) {
                context.moveTo(0.5, y);
                context.lineTo(sample_point, y);
                context.stroke();
            }
            context.closePath();
        }

        //大网格
        function drawBigGrid(c_canvas, color, distance) {
            let context = c_canvas.getContext("2d");
            context.strokeStyle = color;
            context.strokeWidth = 1;
            context.beginPath();
            for (let x = 0.5; x < sample_point; x += distance) {
                context.moveTo(x, 30);
                context.lineTo(x, 500);
                context.stroke();
            }
            for (let y = 30; y < 500; y += distance) {
                context.moveTo(0.5, y);
                context.lineTo(sample_point, y);
                context.stroke();
            }
            context.closePath();
        }

        //画心电图
        function drawLine(c_canvas, color, len) {
            let ctx = c_canvas.getContext('2d');
            let x0 = 0.5;
            let y0 = data[index][0] * 2 / 3 + 400;
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(x0, y0);
            for (let i = 1; i < len; i++) {
                let x = i;
                let y = data[index][i] * 2 / 3 + 400;
                ctx.lineTo(x, y);
                ctx.stroke();
            }
        }

        //显示标注
        function addLabel(label_span, label) {
            if (label === 0) {
                label_span.innerHTML = "AF";
            } else if (label === 1) {
                label_span.innerHTML = "Normal";
            } else if (label === 3) {
                label_span.innerHTML = "Noise";
            } else {
                label_span.innerHTML = "Other";
            }
        }
    </script>